<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>

    <!-- Left Panel -->
    <aside th:fragment="left-panel"id="left-panel" class="left-panel">
        <nav class="navbar navbar-expand-sm navbar-default">

            <div class="navbar-header">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" th:href="@{/}"><img th:src="@{/images/logo.png}" alt="Logo"></a>
                <a class="navbar-brand hidden" th:href="@{/}"><img th:src="@{/images/logo2.png}" alt="Logo"></a>
            </div>

            <div id="main-menu" class="main-menu collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    
                    <li><a id="home-menu-item" th:href="@{/home}"><i class="menu-icon fa fa-home"></i>Home</a></li>
                    
                    <h3 class="menu-title">Banking Accounts</h3><!-- /.menu-title -->
                    
                    <li class="menu-item-has-children dropdown">
                        <a href="#" id="checking-menu" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="menu-icon fa fa-pencil-square-o"></i>Checking</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="fa fa-tasks"></i><a id="view-checking-menu-item" th:href="@{/account/checking-view}">View Checking</a></li>
                            <li><i class="fa fa-plus-square"></i><a id="new-checking-menu-item" th:href="@{/account/checking-add}">New Checking</a></li>
                        </ul>
                    </li>
                    <li class="menu-item-has-children dropdown">
                        <a href="#" id="savings-menu" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="menu-icon fa fa-money"></i>Savings</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="fa fa-tasks"></i><a id="view-savings-menu-item" th:href="@{/account/savings-view}">View Savings</a></li>
                            <li><i class="fa fa-plus-square"></i><a id="new-savings-menu-item" th:href="@{/account/savings-add}">New Savings</a></li>
                        </ul>
                    </li>
                    <li class="menu-item-has-children dropdown" th:if="${creditEnabled}">
                        <a href="#" id="credit-menu" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-credit-card"></i>Credit</a>
                        <ul class="sub-menu children dropdown-menu" th:if="${creditNewApp}">
                            <li><i class="menu-icon fa fa-pencil-square"></i><a id="new-credit-application-menu-item" th:href="@{/credit/credit-app}">New Application</a></li>
                        </ul>
                        <ul class="sub-menu children dropdown-menu" th:if="${creditAppStatus}">
                            <li><i class="menu-icon fa fa-eye"></i><a id="view-credit-application-menu-item" th:href="@{/credit/credit-app-status}">Application Status</a></li>
                        </ul>
                        <ul class="sub-menu children dropdown-menu" th:if="${creditAccount}">
                            <li><i class="menu-icon fa fa-cc-visa"></i><a id="blaze-rewards-menu-item" th:href="@{/credit/credit-view}">Rewards VISA</a></li>
                        </ul>
                    </li>
                    <li class="menu-item-has-children dropdown"> <!--  th:if="${obpEnabled}" -->
                        <a href="#" id="external-accounts-menu" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-external-link"></i>External</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-plus-square"></i><a id="link-external-menu-item" th:href="@{/obp/obp-add}">Link External Account</a></li>
                            <li><i class="menu-icon fa fa-exchange"></i><a id="view-external-menu-item" th:href="@{/obp/obp-view}">View External Accounts</a></li>
                        </ul>
                    </li>
                    
                    <h3 class="menu-title">Transactions / Transfers</h3><!-- /.menu-title -->

                    <li><a id="deposit-menu-item" th:href="@{/account/deposit}"><i class="menu-icon fa fa-sign-in"></i>Deposit</a></li>
                    <li><a id="withdraw-menu-item" th:href="@{/account/withdraw}"><i class="menu-icon fa fa-sign-out"></i>Withdraw</a></li>
                    <li><a id="transfer-menu-item" th:href="@{/account/xfer-between}"><i class="menu-icon fa fa-random"></i>Transfer Between Accounts</a></li>
                    <li><a id="visa-transfer-menu-item" th:href="@{/external/xfer-visa}"><i class="menu-icon fa fa-credit-card"></i>VISA Direct Transfer</a></li>
                    
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
    </aside><!-- /#left-panel -->
    <!-- Left Panel -->

  	<!-- Right Panel -->
    <div id="right-panel" class="right-panel">

        <!-- Header-->
        <header th:fragment="rp-header" id="header" class="header">

            <div class="header-menu">

                <div class="col-sm-7">
                    <a id="menuToggle" class="menutoggle pull-left"><i class="fa fa fa-tasks"></i></a>
                    <div class="header-left">
                        <button id="searchLocations" class="search-trigger"><i class="fa fa-search"></i></button>
                       		<div class="form-inline">
                            	<form class="search-form" th:action="@{/search/atm}" method="post">
                             		<div class="form-group">
	                            		<label for="zipcode" class="pr-1 form-control-label text-light">Find ATM Locations</label> 
	                                	<input id="zipcode" name="zipcode" class="form-control mr-sm-2" type="text" placeholder="Enter Zip Code" aria-label="Search" required th:pattern="${patternZip}">
	                                	<button id="submit" type="submit"></button>
	                                	<button class="search-close" type="submit"><i class="fa fa-close"></i></button>
                            		</div>
                            	</form>
                        	</div>
						
                        <div class="dropdown for-notification">
                          <button class="btn btn-secondary dropdown-toggle" type="button" id="notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-bell"></i>
                            
                            <span class="count bg-danger" th:text="${#lists.size(notifications)}">[Num Notifications]</span>
                            <!--<span class="count bg-danger" th:text="${notificationCount}">[Num Notifications]</span>-->
                            <!--<span class="count bg-danger">1</span>-->
                            
                          </button>
                          <div class="dropdown-menu" aria-labelledby="notification">
                            
                            <p style="width: max-content">You have <span th:text="${#lists.size(notifications)}">[Num Notifications]</span> Notification[s]</p>
                            
                            <a class="dropdown-item media" th:each="notification : ${notifications}" href="#">
                                <i class="fa fa-warning"></i>
                                <p th:text="${notification.content}">[Msg Content]</p>
                            </a>
                            <!-- <a class="dropdown-item media" href="#">
                                <i class="fa fa-warning"></i>
                                <p>Schedule Maintenance this weekend.</p>
                            </a> -->
                            
                          </div>
                        </div>

                        <div class="dropdown for-message">
                          <button class="btn btn-secondary dropdown-toggle" type="button"
                                id="message"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="ti-email"></i>
                            <span class="count bg-primary">0</span>
                          </button>
                       

                          <div class="dropdown-menu" aria-labelledby="message">
                            <p style="width: max-content">You have 0 Unread Mail[s]</p>
                            <!-- <a class="dropdown-item media" href="#">
                                <i class="fa fa-warning"></i>
                            </a> -->
                          </div>
                          
                          
                        </div>
                    </div>
                </div>

                <div class="col-sm-5">
                    <div class="user-area dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <img class="user-avatar rounded-circle" th:src="@{/images/} + ${avatar}" alt="User Avatar"></img>
                        </a>
                        <div class="user-menu dropdown-menu">
                                <a class="nav-link" th:href="@{/user/profile}"><i class="fa fa- user"></i>My Profile</a>
                                <a class="nav-link" th:href="@{/user/password}"><i class="fa fa- user"></i>Change Password</a>
                                <a class="nav-link" th:href="@{/logout}"><i class="fa fa-power -off"></i>Logout</a> 
                        </div>
                    </div>
                    <div class="language-select dropdown" id="language-select">
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown"  id="language" aria-haspopup="true" aria-expanded="true">
                            <i class="flag-icon flag-icon-us"></i>
                        </a>
                    </div>
                    
                    <div class="user-area dropdown">
                    	<a class="user-avatar rounded-circle" data-toggle="modal" href="#aboutModal" id="aboutLink">
                    	<i class="ti-help-alt text-primary border-primary"></i>
                    	</a>
					</div>
                </div>
                
                 <!--  About Modal Begin -->
		        <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" data-backdrop="static">
		       		<div class="modal-dialog modal-sm" role="document">
		           		<div class="modal-content">
		               		<div class="modal-header">
		               			<a href="#"><img class="align-self-center rounded-circle mr-3" style="width:40px; height:40px;" alt="" th:src="@{/favicon.ico}"></a>
		                   		<h3 class="modal-title" id="aboutModalTitle" th:text="${appName}"></h3>
		                   		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                	<span aria-hidden="true">×</span>
                                </button>
		                   	</div>
		                	<div class="modal-body">
		                		<p th:utext="'Version: ' + ${appVersion} + '&lt;br /&gt;Date: ' + ${appBuildDate}"></p>
		                	</div>
		           		</div>
		        	</div>
		    	</div>
		    	
		    	<!--  About Modal End -->
            </div>

        </header><!-- /header -->
        <!-- Header-->

        <div th:fragment="rp-breadcrumbs (pageTitle)" class="breadcrumbs">
            <div class="col-sm-4">
                <div class="page-header float-left">
                    <div class="page-title">
                        <h1 id="page-title" th:text="${pageTitle}"></h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="page-header float-right">
                    <div class="page-title">
                        <ol class="breadcrumb text-right">
                            <li class="active" th:text="'Welcome ' + ${firstName}">Welcome</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        
		<!-- Content Begin -->

		<!-- Content End -->

    </div><!-- /#right-panel -->
    
</body>
</html>